<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易记录条件选择</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <style>
        .rightbtn{
            width: 80%;
            height: 80px;
            font-size: 42px;
            color: white;
            border-radius: 20px;
            background-color: #23b14d;
            margin-left: 20px;
            margin-top: 30px;
        }
        .cancelbtn{
            width: 80%;
            height: 80px;
            font-size: 42px;
            color: white;
            background-color: #c3c3c3;
            border-radius: 20px;
            margin-top: 30px;
        }
        .layui-container{
            font-size: 36px;
        }
        .orderstatus{
            height: 80px;
            width: 80%;
            font-size: 36px;
            background-color: #c8c8c8;
            border-radius: 20px;
            margin-left: 20px;
            margin-bottom: 30px;
            color: black;
        }
        .layui-row{
            height: 80px;
            margin-top: 20px;
            margin-bottom: 20px;
            color: grey;

        }
        .active{
            background-color: green;
            color: white;
        }
        input{
            width: 100%;
            height: 60px;
            font-size: 36px;
            border: 1px solid green;
        }

    </style>
</head>
<body>

<div class="layui-container">

    <div class="layui-row">订单状态</div>

    <div class="layui-row">
        <input type="hidden" id="jiaoyitype">
        <div class="layui-col-xs4">
            <button class="orderstatus active layui-btn">全部</button>
        </div>
        <div class="layui-col-xs4">
            <button class="orderstatus layui-btn" val="0">买入</button>
        </div>
        <div class="layui-col-xs4">
            <button class="orderstatus layui-btn" val="1">卖出</button>
        </div>
    </div>

    <div class="layui-row">交易所</div>
    <div class="layui-row">
        <input type="text" name="pingtai" value="火币" readonly>
    </div>


    <div class="layui-row">交易币</div>

    <div class="layui-row">

        <input type="text" id="bizhongname" name="bizhongname" placeholder="例如:btcusdt">

    </div>

    <div class="layui-row">时间</div>

    <div class="layui-row">

        <div class="layui-col-xs5">
            <input type="date" id="startdate" name="startdate">
        </div>
        <div class="layui-col-xs5 layui-col-xs-offset2">
            <input type="date" id="enddate" name="enddate">
        </div>
    </div>

    <div class="layui-row">

        <div class="layui-col-xs5 layui-col-xs-offset1">
            <button class="rightbtn layui-btn">确认</button>
        </div>

        <div class="layui-col-xs5 layui-col-xs-offset1">
            <button class="cancelbtn layui-btn">取消</button>
        </div>
    </div>
</div>

<script>
    $(function () {
        $(".cancelbtn").click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });


        $(".rightbtn").click(function () {

            parent.$("#fresh").val(1);
            parent.$("#jiaoyitype").val($("#jiaoyitype").val());
            parent.$("#bizhongname").val($("#bizhongname").val());
            parent.$("#startdate").val($("#startdate").val());
            parent.$("#enddate").val($("#enddate").val());

            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭

        });

        $(".orderstatus").click(function () {
            $(".orderstatus").removeClass("active");
            $(".orderstatus").css("color","black");
            $(this).addClass("active");
            $(this).css("color","white");
            var val = $(this).attr("val");
            $("#jiaoyitype").val(val);

        });


    });
</script>
</body>
</html>